import { Injectable } from '@angular/core';
import { PainterEvent, ToolType, ToolItem } from '../entity/ToolItem';
import { EventService } from './event.service';
import { PaletteColor, PaletteSize } from '../entity/PaletteColor';

const TAG : string = "PainterService"

@Injectable({
  providedIn: 'root'
})
export class PainterService {
  
  draw : any;

  constructor(
    private eventService: EventService,
  ) { 
    console.log(TAG, "...");
  }
  
  init(){
    console.log(TAG, "init ...");
    this.initDraw();
    this.initEvent();
  }

  initDraw(){
    console.log(TAG, "initDraw ...");

    let $painter = $('#painter');
    if($painter.length <= 0){
      console.error("#painter is not exist!");
      return;
    }

    let option = {
      width: $painter.width(),
      height: $painter.height(),
      parent: $painter,
      type: 'arrow',
      lineWidth: 2,
      color: 'red'
    }

    this.draw = new DrawBoard(option);
    this.draw.addListenner((drawType : string, data: any) => {
      this.sendDraw(drawType, data);
    });


    console.log(TAG, "draw:", this.draw );
  }

  initEvent(){
    console.log(TAG, "initEvent...");

    this.eventService.subscribeToolItem((msg: ToolItem) => {
      this.setToolItem(msg)
    })

    this.eventService.subscribeToolColor((c: PaletteColor) => {
      this.setToolItem(c.item)
      this.setColor(c.item, c.color)
    })

    this.eventService.subscribeToolSize((c: PaletteSize) => {
      this.setToolItem(c.item)
      this.setWidth(c.item, c.width);
    })

    this.eventService.subscribeWhiteBoardChanged((act: boolean) => {
      this.draw.setEnable(act)
    })
 
     this.eventService.subscribePaintChange((pe: PainterEvent) => {
      console.log('subscribePaintChange', pe);
      this.setDraw(pe);
    })

  }

  xyFromLocation(location) {
    return { x: location.left, y: location.top }
  }

  xyToLocation(position) {
    return { left: position.x, top: position.y }
  }


  setDraw(pe: PainterEvent) {
    switch (pe.type) {
      case ToolType.PEN:
        {
          pe.data = JSON.parse(pe.data);
          pe.data.points = pe.data.points.map(d => { return this.xyToLocation(d) });
          this.draw.setDrawCurve(pe.data)
          break;
        }

      case ToolType.DELETE:
        this.draw.clear()
        break;

      case ToolType.CUTTER:
        {
          pe.data = JSON.parse(pe.data);
          let data = this.xyToLocation(pe.data)
          this.draw.setDrawErase(data);
          break;
        }

      case ToolType.TEXT:
        {
          this.draw.setDrawText(pe.data)
          break;
        }

      case ToolType.MOVE_SECTION:
        let data = { left: pe.data.x, top: pe.data.y, w: pe.data.width, h: pe.data.height }
        this.draw.setDrawSection(data);
        break;

      case ToolType.MOVE_MOVE:
        {
          let data = { left: pe.data.x, top: pe.data.y }
          this.draw.setDrawMove(data);
          break;
        }
        case ToolType.MOVE_REMOVE:{
          this.draw.setDrawRemove(pe.data);
          break;
        }


    }
  }

    sendDraw(drawType: string, data: any) {

      switch (drawType) {
        case 'curve': {
          data.points = data.points.map(d => { return this.xyFromLocation(d) });
          let pe: PainterEvent = { type: ToolType.PEN, data: JSON.stringify(data) }
          this.eventService.sendDraw(pe);
          break;
        }

        case 'erase': {
          data = { x: data.left, y: data.top }
          let pe: PainterEvent = { type: ToolType.CUTTER, data: JSON.stringify(data) }
          this.eventService.sendDraw(pe);
          break;
        }

        case 'text': {
          let pe: PainterEvent = { type: ToolType.TEXT, data: data }
          this.eventService.sendDraw(pe)
          break;
        }

        case 'section': {
          data = { x: data.left, y: data.top, width: data.w, height: data.h }
          let pe: PainterEvent = { type: ToolType.MOVE_SECTION, data: data }
          this.eventService.sendDraw(pe)
          break;
        }

        case 'move': {
          data = { x: data.left, y: data.top }
          let pe: PainterEvent = { type: ToolType.MOVE_MOVE, data: data }
          this.eventService.sendDraw(pe)
          break;
        }

        case 'remove': {
          let pe: PainterEvent = { type: ToolType.MOVE_REMOVE, data: JSON.stringify(data) }
          this.eventService.sendDraw(pe);
          break;
        }
    }
  }



  clear() {
    this.draw.clear();
    this.eventService.sendDraw({ type: ToolType.DELETE, data: "true" })
  }


  setColor(t: ToolItem, c: string) {
    console.log("setColor", t, c)
    this.draw.setColor(this.toItemType(t), c)
  }

  setWidth(t: ToolItem, c: number) {
    console.log("setWidth", t, c)
    this.draw.setLineWidth(this.toItemType(t), c)
  }


  toItemType(msg: ToolItem) {
    switch (msg.type) {

      case ToolType.DELETE:
        this.clear()
        break;

      case ToolType.PEN:
        return 'curve';
      case ToolType.TEXT:
        return 'text'
      case ToolType.CUTTER:
        return 'ease'

      case ToolType.MOVE:
        return 'section'

      case ToolType.CLOUD:

        break;
    }
  }

  setToolItem(msg: ToolItem) {
    console.log("setToolItem", msg)
    var t = this.toItemType(msg)
    if (t && this.draw) {
      this.draw.setType(t);
    }
  }


}
